html,
body {
  width: 100%;
  height: 100%;
}
html #main,
body #main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #fff;
  overflow: auto;
}
html #main .rule,
body #main .rule {
  position: absolute;
  right: 0;
  top: 6.7rem;
  width: 2.42rem;
  height: 0.98rem;
  z-index: 5;
}
html #main .rule img,
body #main .rule img {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
}
html #main .logBox,
body #main .logBox {
  position: absolute;
  right: 0;
  top: 5.6rem;
  width: 2.42rem;
  height: 0.98rem;
  z-index: 5;
}
html #main .logBox img,
body #main .logBox img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
html #main .topBg,
body #main .topBg {
  position: absolute;
  width: 100%;
  height: 19.2rem;
  background: url("../images2/topBg.png") no-repeat;
  background-size: 100% 100%;
}
html #main .banner,
body #main .banner {
  position: absolute;
  top: 4.1rem;
  left: 0;
  width: 100%;
  height: 8.76rem;
  z-index: 1;
}
html #main .banner img,
body #main .banner img {
  width: 100%;
  height: 100%;
  display: block;
}
html #main .detailBlock,
body #main .detailBlock {
  position: relative;
  width: 10.22rem;
  background: #fff;
  margin: 7.76rem auto 0;
  box-shadow: 0px 14px 29px 0px #e7e7e7;
  z-index: 2;
  box-sizing: border-box;
  padding: 0 0 0.48rem;
  overflow: hidden;
  border-radius: 0.2rem 0.2rem 0 0;
}
html #main .detailBlock .topBtn,
body #main .detailBlock .topBtn {
  position: relative;
  width: 100%;
  height: 1.44rem;
  display: flex;
}
html #main .detailBlock .topBtn .btn,
body #main .detailBlock .topBtn .btn {
  font-size: 0.43rem;
  text-align: center;
  color: #333;
  background: #D5E8FF;
  width: 50%;
  height: 1.44rem;
  line-height: 1.44rem;
}
html #main .detailBlock .topBtn .leftBtn,
body #main .detailBlock .topBtn .leftBtn {
  background-size: 100% 100%;
}
html #main .detailBlock .topBtn .on,
body #main .detailBlock .topBtn .on {
  background: #fff;
  font-size: 0.5rem !important;
  font-weight: bold;
}
html #main .detailBlock .topBtn .rightBtn,
body #main .detailBlock .topBtn .rightBtn {
  bottom: 0;
  font-size: 0.43rem;
}
html #main .detailBlock .title,
body #main .detailBlock .title {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.43rem;
  color: #333333;
  font-family: Source Han Sans CN;
}
html #main .detailBlock .title:before,
body #main .detailBlock .title:before,
html #main .detailBlock .title:after,
body #main .detailBlock .title:after {
  content: '';
  width: 0.39rem;
  height: 0.36rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
html #main .detailBlock .title:before,
body #main .detailBlock .title:before {
  left: -0.8rem;
  background: url("../images2/titleBg.png") no-repeat;
  background-size: 100% 100%;
}
html #main .detailBlock .title:after,
body #main .detailBlock .title:after {
  right: -0.8rem;
  background: url("../images2/titleBg2.png") no-repeat;
  background-size: 100% 100%;
}
html #main .detailBlock .detailBoxOne,
body #main .detailBlock .detailBoxOne {
  width: 100%;
  margin-top: 0.72rem;
}
html #main .detailBlock .detailBoxOne .phoneBox,
body #main .detailBlock .detailBoxOne .phoneBox {
  position: relative;
  margin: 0.43rem auto 0.4rem;
  width: 8.93rem;
  height: 1.15rem;
}
html #main .detailBlock .detailBoxOne .phoneBox input,
body #main .detailBlock .detailBoxOne .phoneBox input {
  width: 100%;
  height: 100%;
  border: 0.03rem solid #24508E;
  background: #fff;
  box-sizing: border-box;
  padding: 0.37rem 1.45rem 0.37rem 0.45rem;
  font-size: 0.4rem;
}
html #main .detailBlock .detailBoxOne .phoneBox label,
body #main .detailBlock .detailBoxOne .phoneBox label {
  position: absolute;
  right: 0.32rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.49rem;
  height: 0.56rem;
  background: url("../images2/phoneIcon.png") no-repeat;
  background-size: 100% 100%;
}
html #main .detailBlock .detailBoxOne .redPackBox,
body #main .detailBlock .detailBoxOne .redPackBox {
  display: flex;
  flex-wrap: wrap;
  width: 9.44rem;
  margin: 0 auto ;
  justify-content: space-around;
}
html #main .detailBlock .detailBoxOne .redPackBox .redPackItem,
body #main .detailBlock .detailBoxOne .redPackBox .redPackItem {
  box-sizing: border-box;
  margin-bottom: 0.4rem;
  padding: 0.46rem 0 0.4rem;
  width: 2.59rem;
  height: 2.59rem;
  background: url("../images2/redPacket.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  text-align: center;
}
html #main .detailBlock .detailBoxOne .redPackBox .redPackItem .money,
body #main .detailBlock .detailBoxOne .redPackBox .redPackItem .money {
  color: #0187F2;
  font-size: 0.52rem;
  font-weight: bold;
}
html #main .detailBlock .detailBoxOne .redPackBox .redPackItem .msg,
body #main .detailBlock .detailBoxOne .redPackBox .redPackItem .msg {
  color: #FFFFFF;
  font-size: 0.46rem;
}
html #main .detailBlock .detailBoxOne .redPackBox .redPackItem.on,
body #main .detailBlock .detailBoxOne .redPackBox .redPackItem.on {
  background: url("../images2/redPacketOn.png") no-repeat;
  background-size: 100% 100%;
}
html #main .detailBlock .detailBoxOne .redPackBox .redPackItem.on .money,
body #main .detailBlock .detailBoxOne .redPackBox .redPackItem.on .money {
  color: #F48A07;
  font-size: 0.52rem;
  font-weight: bold;
}
html #main .detailBlock .detailBoxOne .redPackBox .redPackItem.on .msg,
body #main .detailBlock .detailBoxOne .redPackBox .redPackItem.on .msg {
  color: #FFFFFF;
  font-size: 0.46rem;
}
html #main .detailBlock .detailBoxOne .adBanner,
body #main .detailBlock .detailBoxOne .adBanner {
  position: relative;
  display: none;
  width: 9.44rem;
  height: 3.74rem;
  margin: auto;
  background: url("../images2/adBanner.png") no-repeat;
  background-size: 100% 100%;
}
html #main .detailBlock .detailBoxOne .adBanner .adBg,
body #main .detailBlock .detailBoxOne .adBanner .adBg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 3;
  width: 0.63rem;
  height: 1.93rem;
  background: url("../images2/adBg.png") no-repeat;
  background-size: 100% 100%;
}
html #main .detailBlock .detailBoxtwo,
body #main .detailBlock .detailBoxtwo {
  margin-top: 0.45rem;
}
html #main .detailBlock .detailBoxtwo .detailContent,
body #main .detailBlock .detailBoxtwo .detailContent {
  width: 9.65rem;
  height: 5.76rem;
  margin: 0.42rem auto 0;
  background: #D9F2FF;
  display: flex;
}
html #main .detailBlock .detailBoxtwo .detailContent .leftNav,
body #main .detailBlock .detailBoxtwo .detailContent .leftNav {
  box-sizing: border-box;
  width: 2.3rem;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
  background: #D9F2FF;
}
html #main .detailBlock .detailBoxtwo .detailContent .leftNav .leftBtn,
body #main .detailBlock .detailBoxtwo .detailContent .leftNav .leftBtn {
  width: 100%;
  height: 16.66666667%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.322rem;
  text-align: center;
  background-size: 100% 100%;
  color: #0966F0;
}
html #main .detailBlock .detailBoxtwo .detailContent .leftNav .leftBtn + .leftBtn,
body #main .detailBlock .detailBoxtwo .detailContent .leftNav .leftBtn + .leftBtn {
  border-top: 0.01rem solid #16C0FF;
}
html #main .detailBlock .detailBoxtwo .detailContent .leftNav .leftBtn.active,
body #main .detailBlock .detailBoxtwo .detailContent .leftNav .leftBtn.active {
  background: url("../images2/leftBavBtnOn.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
}
html #main .detailBlock .detailBoxtwo .detailContent .rightCon,
body #main .detailBlock .detailBoxtwo .detailContent .rightCon {
  width: 7.35rem;
  height: 100%;
}
html #main .detailBlock .detailBoxtwo .detailContent .rightCon .msgBox,
body #main .detailBlock .detailBoxtwo .detailContent .rightCon .msgBox {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.77rem;
  height: 5.04rem;
  background: url("../images2/textBg.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0.76rem 0.5rem;
  color: #3570FF;
  font-size: 0.38rem;
  text-align: justify;
}
html #main .bannerB,
body #main .bannerB {
  position: relative;
  width: 10.22rem;
  height: 2.87rem;
  margin: 0.29rem auto 2rem;
}
html #main .bannerB img,
body #main .bannerB img {
  width: 100%;
  height: 100%;
  display: block;
}
html #main .bannerB a,
body #main .bannerB a {
  display: block;
  width: 100%;
  height: 100%;
}
html #main .bannerB .watch,
body #main .bannerB .watch {
  position: absolute;
  top: 1.08rem;
  right: 0.43rem;
  width: 2.3rem;
  height: 0.72rem;
  background: linear-gradient(0deg, #ffcc41, #fefc71);
  box-shadow: 0px 6px 12px 0px rgba(210, 29, 0, 0.3);
  border-radius: 0.36rem;
  color: #D48B0B;
  text-align: center;
  line-height: 0.72rem;
  font-size: 0.36rem;
}
html #main .submit,
body #main .submit {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.73rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}
html #main .submit .submitBtn,
body #main .submit .submitBtn {
  width: 10.22rem;
  height: 1.3rem;
  line-height: 1.3rem;
  text-align: center;
  background: url("../images2/btnBg.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.5rem;
  border-radius: 0.3rem;
  font-weight: bold;
}
.animation {
  animation: animToast 0.5s;
}
@keyframes animToast {
  0% {
    transform: skewY(0deg);
  }
  50% {
    transform: skewY(-15deg);
  }
  100% {
    transform: skewY(0deg);
  }
}
.toast {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.2rem;
  color: #fff;
  border-radius: 0.2rem;
  opacity: 0;
  z-index: -99;
  font-size: 0.5rem;
}
.ani_code {
  animation: animToast2 2s;
}
@keyframes animToast2 {
  from {
    top: 30%;
    opacity: 0;
    z-index: 999;
  }
  to {
    top: 38%;
    opacity: 1;
    z-index: 999;
  }
}
